<template>
<div class="recommended">
  <div class="header">
    <span class="iconfont">&#xe636;</span>
    <span class="title">周末去哪儿</span>
  </div>
  <div class="main">
    <div :key="item.index" class="item border-bottom" v-for="item in items">
      <div class="image">
        <img :src="item.image" />
      </div>
      <div class="font">
        <p class="title">{{item.title}}</p>
        <p class="ps">{{item.ps}}</p>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default{
  props: ['items'],
  name: 'IndexRecommended'
}
</script>
<style lang="stylus" scoped>
  .recommended
    padding: 0.3rem;
    background-color: #fff;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    .header
      margin-bottom: .3rem
      .iconfont
        color: #ffba1e
      .title
        display: inline-block;
        margin-left: .08rem;
        height: .44rem;
        color: #212121;
        font-size: .32rem;
        line-height: .44rem;
    .main
      .item
        padding-bottom: .2rem
        margin-top: .2rem
        .image
        img
          width: 100%
        .font
          .title
            overflow: hidden;
            padding-right: 1.4rem;
            color: #212121;
            font-size: .28rem;
            line-height: .48rem;
            white-space: nowrap;
            text-overflow: ellipsis;
          .ps
            overflow: hidden;
            padding-right: 1.4rem;
            color: #616161;
            font-size: .24rem;
            line-height: .42rem;
            white-space: nowrap;
            text-overflow: ellipsis;
</style>
